<template>
	<a-modal
		v-model:visible="visible"
		@ok="handleOk"
		@cancel="handleCancel"
		:footer="false"
		width="61.8vw"
	>
		<template #title>{{ historyRecord?.name }}</template>
		<div class="history w-full">
			<v-chart
				class="vchart w-full h-full"
				:option="option"
				ref="vchart"
			/>
		</div>
	</a-modal>
</template>

<script setup>
import { ref, watch, nextTick, computed } from "vue";
import { storeToRefs } from "pinia";
import dayjs from "dayjs";
import { useAppStore } from "@/stores";

const appStore = useAppStore();
const { historyVisible, historyRecord, getStockTend, colors } =
	storeToRefs(appStore);

const visible = ref(false);

const handleCancel = () => {
	visible.value = false;
	appStore.updateState({ historyVisible: false, historyRecord: null });
};

const handleOk = () => {
	handleCancel();
};

const vchart = ref(null);
const option = ref({});

const minPrice = computed(() =>
	Math.round(
		Math.min(
			getStockTend.value.map((s) => s.cost).sort((a, b) => a - b)[0],
			getStockTend.value.map((s) => s.price).sort((a, b) => a - b)[0]
		) * 0.95
	)
);
const maxPrice = computed(() =>
	Math.round(
		Math.max(
			getStockTend.value.map((s) => s.cost).sort((a, b) => b - a)[0],
			getStockTend.value.map((s) => s.price).sort((a, b) => b - a)[0]
		) * 1.05
	)
);

const minSummary = computed(() =>
	Math.round(
		Math.min(
			getStockTend.value
				.map((s) => s.price * s.shares[0])
				.sort((a, b) => a - b)[0],
			getStockTend.value
				.map((s) => s.price * s.shares[1])
				.sort((a, b) => a - b)[0],
			getStockTend.value.map((s) => s.summary).sort((a, b) => a - b)[0]
		) * 0.95
	)
);
const maxSummary = computed(() =>
	Math.round(
		Math.max(
			getStockTend.value
				.map((s) => s.price * s.shares[0])
				.sort((a, b) => b - a)[0],
			getStockTend.value
				.map((s) => s.price * s.shares[1])
				.sort((a, b) => b - a)[0],
			getStockTend.value.map((s) => s.summary).sort((a, b) => b - a)[0]
		) * 1.05
	)
);

const setOption = () => {
	// console.log(getStockTend.value);
	// console.log(minPrice);
	option.value = {
		color: colors.value,
		legend: {},
		tooltip: {},
		grid: {
			top: "10%",
			left: "3%",
			right: "3%",
			bottom: "3%",
			containLabel: true,
		},
		xAxis: [
			{
				data: getStockTend.value.map((s) => s.time),
				// axisLabel: { interval: 0 },
			},
		],
		yAxis: [
			{
				type: "value",
				name: "市值（元）",
				// min: minSummary.value,
				// max: maxSummary.value,
				splitLine: {
					show: false,
				},
			},
			{
				type: "value",
				name: "现价（元）",
				position: "right",
				// min: minPrice.value,
				// max: maxPrice.value,
				splitLine: {
					show: false,
				},
			},
			{
				type: "value",
				offset: -120,
				name: "盈利（%）",
				position: "right",
				// min: minPrice.value * 0.95,
				// max: maxPrice.value * 1.05,
				splitLine: {
					show: false,
				},
			},
		],
		series: [
			{
				data: getStockTend.value.map((s) =>
					((s.shares[0] + s.shares[1]) * s.price).toFixed(2)
				),
				type: "bar",
				name: "Summary",
				barWidth: 16,
				label: {
					show: true,
					position: "right",
					distance: 16,
				},
			},
			{
				data: getStockTend.value.map((s) =>
					(s.shares[0] * s.price).toFixed(2)
				),
				type: "bar",
				name: "L",
				stack: "Summary",
				barWidth: 5,
			},
			{
				data: getStockTend.value.map((s) =>
					(s.shares[1] * s.price).toFixed(2)
				),
				type: "bar",
				name: "C",
				stack: "Summary",
				barWidth: 5,
			},
			{
				data: getStockTend.value.map((s) => s.price.toFixed(3)),
				type: "line",
				name: "Price",
				yAxisIndex: 1,
				smooth: true,
				label: {
					show: true,
					position: "top",
				},
				areaStyle: {},
			},
			{
				data: getStockTend.value.map((s) => s.cost.toFixed(3)),
				type: "line",
				name: "Cost",
				yAxisIndex: 1,
				smooth: true,
				label: {
					show: true,
					position: "top",
				},
				areaStyle: {},
			},
			{
				data: getStockTend.value.map((s) => s.profit.toFixed(3)),
				type: "line",
				name: "Profit",
				yAxisIndex: 2,
				smooth: true,
				label: {
					show: true,
					position: "top",
				},
			},
		],
	};
	vchart.value.resize();
	vchart.value.setOption(option.value);
};

watch(
	() => historyVisible.value,
	(val, oldVal) => {
		visible.value = val;
		nextTick(() => {
			setOption();
		});
	}
);
</script>

<script>
export default {
	name: "CommonHistory",
};
</script>

<style scoped lang="less">
.history {
	height: 61.8vh;
}
</style>
